<template>
  <t-card>
    <t-tabs v-model="activeName">
      <t-tab-panel label="基本信息" value="basic" :destroy-on-hide="false">
        <basic-info-form ref="basicInfo" :info="info" />
      </t-tab-panel>
      <t-tab-panel label="字段信息" value="columnInfo" :destroy-on-hide="false">
        <t-table
          ref="dragTable"
          :data="columns"
          :columns="tableColumns"
          row-key="columnId"
          :max-height="tableHeight"
        >
          <template #columnComment="scope">
            <t-input v-model="scope.row.columnComment"></t-input>
          </template>
          <template #javaType="scope">
            <t-select v-model="scope.row.javaType">
              <t-option label="Long" value="Long" />
              <t-option label="String" value="String" />
              <t-option label="Integer" value="Integer" />
              <t-option label="Double" value="Double" />
              <t-option label="BigDecimal" value="BigDecimal" />
              <t-option label="Date" value="Date" />
              <t-option label="Boolean" value="Boolean" />
            </t-select>
          </template>
          <template #javaField="scope">
            <t-input v-model="scope.row.javaField"></t-input>
          </template>

          <template #isInsert="scope">
            <t-checkbox v-model="scope.row.insert"></t-checkbox>
          </template>
          <template #isEdit="scope">
            <t-checkbox v-model="scope.row.edit"></t-checkbox>
          </template>
          <template #isList="scope">
            <t-checkbox v-model="scope.row.list"></t-checkbox>
          </template>
          <template #isQuery="scope">
            <t-checkbox v-model="scope.row.query"></t-checkbox>
          </template>
          <template #queryType="scope">
            <t-select v-model="scope.row.queryType">
              <t-option label="=" value="EQ" />
              <t-option label="!=" value="NE" />
              <t-option label=">" value="GT" />
              <t-option label=">=" value="GTE" />
              <t-option label="<" value="LT" />
              <t-option label="<=" value="LTE" />
              <t-option label="LIKE" value="LIKE" />
              <t-option label="BETWEEN" value="BETWEEN" />
            </t-select>
          </template>
          <template #isRequired="scope">
            <t-checkbox v-model="scope.row.required"></t-checkbox>
          </template>
          <template #htmlType="scope">
            <t-select v-model="scope.row.htmlType">
              <t-option label="文本框" value="input" />
              <t-option label="文本域" value="textarea" />
              <t-option label="下拉框" value="select" />
              <t-option label="单选框" value="radio" />
              <t-option label="复选框" value="checkbox" />
              <t-option label="日期控件" value="datetime" />
              <t-option label="图片上传" value="imageUpload" />
              <t-option label="文件上传" value="fileUpload" />
              <t-option label="富文本控件" value="editor" />
            </t-select>
          </template>
          <template #dictType="scope">
            <t-select
              v-model="scope.row.dictType"
              clearable
              filterable
              placeholder="请选择"
            >
              <t-option
                v-for="dict in dictOptions"
                :key="dict.dictType"
                :label="dict.dictName"
                :value="dict.dictType"
              >
                <span style="float: left">{{ dict.dictName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  dict.dictType
                }}</span>
              </t-option>
            </t-select>
          </template>
        </t-table>
      </t-tab-panel>
      <t-tab-panel label="生成信息" value="genInfo" :destroy-on-hide="false">
        <gen-info-form ref="genInfo" :info="info" :tables="tables" />
      </t-tab-panel>
    </t-tabs>
    <t-form label-width="100px">
      <div style="text-align: center; margin-left: -100px; margin-top: 10px">
        <t-space>
          <t-button theme="primary" @click="submitForm()">提交</t-button>
          <t-button theme="default" @click="close()">返回</t-button>
        </t-space>
      </div>
    </t-form>
  </t-card>
</template>

<script setup name="GenEdit">
import { inject } from "vue";
import { getGenTable, updateGenTable } from "@/api/tool/gen";
import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
import basicInfoForm from "./basicInfoForm";
import genInfoForm from "./genInfoForm";

const route = useRoute();
const { proxy } = getCurrentInstance();

const activeName = ref("columnInfo");
const tableHeight = ref(document.documentElement.scrollHeight - 245 + "px");
const tables = ref([]);
const columns = ref([]);
const dictOptions = ref([]);
const info = ref({});

const tableColumns = ref([
  {
    colKey: "serial-number",
    width: 65,
    align: "center",
    title: "序号",
  },
  {
    colKey: "columnName",
    title: "列名",
    align: "center",
    ellipsis: true,
  },
  {
    colKey: "columnComment",
    title: "列描述",
    align: "center",
  },
  {
    colKey: "columnType",
    title: "物理类型",
    align: "center",
    ellipsis: true,
  },
  {
    colKey: "javaType",
    title: "Java类型",
    align: "center",
    width: 150,
  },
  {
    colKey: "javaField",
    title: "java属性",
    align: "center",
    width: 150,
  },
  {
    colKey: "isInsert",
    title: "插入",
    align: "center",
    width: 100,
  },
  {
    colKey: "isEdit",
    title: "编辑",
    align: "center",
    width: 100,
  },
  {
    colKey: "isList",
    title: "列表",
    align: "center",
    width: 100,
  },
  {
    colKey: "isQuery",
    title: "查询",
    align: "center",
    width: 100,
  },
  {
    colKey: "queryType",
    title: "查询方式",
    align: "center",
    width: 100,
  },
  {
    colKey: "isRequired",
    title: "必填",
    align: "center",
    width: 50,
  },
  {
    colKey: "htmlType",
    title: "显示类型",
    align: "center",
    width: 150,
  },
  {
    colKey: "dictType",
    title: "字典类型",
    align: "center",
    width: 150,
  },
]);

const basicInfo = ref(null);
const genInfo = ref(null);

/** 提交按钮 */
function submitForm() {
  Promise.all([basicInfo, genInfo].map(getFormPromise)).then((res) => {
    const validateResult = res.every((item) => !!item);
    if (validateResult) {
      const genTable = Object.assign({}, info.value);
      genTable.columns = columns.value;
      genTable.params = {
        treeCode: info.value.treeCode,
        treeName: info.value.treeName,
        treeParentCode: info.value.treeParentCode,
        parentMenuId: info.value.parentMenuId,
      };
      updateGenTable(genTable).then((res) => {
        proxy.$modal.msgSuccess(res.msg);
        if (res.code === 200) {
          close();
        }
      });
    } else {
      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
    }
  });
}
function getFormPromise(form) {
  return form.value.validate();
}
function close() {
  const obj = {
    path: "/tool/gen",
    query: { t: Date.now(), pageNum: route.query.pageNum },
  };
  proxy.$tab.closeOpenPage(obj);
}

(() => {
  const tableId = route.params && route.params.tableId;
  if (tableId) {
    // 获取表详细信息
    getGenTable(tableId).then((res) => {
      columns.value = res.data.rows;
      info.value = res.data.info;
      tables.value = res.data.tables;
    });
    /** 查询字典下拉列表 */
    getDictOptionselect().then((response) => {
      dictOptions.value = response.data;
    });
  }
})();
</script>
